﻿@inject IconService iconService

<div style="width: 256px;">
	<Button Type="primary" OnClick="ToggleCollapsed" Style="margin-bottom: 16px">
		@if (collapsed)
		{
			<Icon Type="menu-unfold" Theme="outline"></Icon>
		}
		else
		{
			<Icon Type="menu-fold" Theme="outline"></Icon>
		}
	</Button>
	<Menu DefaultSelectedKeys=@(new[] { "1" })
		  DefaultOpenKeys=@(new[] { "sub1" })
		  Mode=MenuMode.Inline
		  Theme=MenuTheme.Dark
		  InlineCollapsed=collapsed>
		<MenuItem Key="1" Icon="pie-chart">
			<IconTemplate>
				<IconFont Type="icon-c-sharp-l" />
			</IconTemplate>
			<ChildContent>
				Option 1
			</ChildContent>
		</MenuItem>
		<MenuItem Key="2" Icon="desktop">
			Option 2
		</MenuItem>
		<MenuItem Key="3" Icon="container">
			Option 3
		</MenuItem>
		<SubMenu Key="sub1" TitleTemplate=@sub1Title>
			<MenuItem Key="5">Option 5</MenuItem>
			<MenuItem Key="6">Option 6</MenuItem>
			<MenuItem Key="7">Option 7</MenuItem>
			<MenuItem Key="8">Option 8</MenuItem>
		</SubMenu>
		<SubMenu Key="sub2" TitleTemplate=@sub2Title>
			<MenuItem Key="9">Option 9</MenuItem>
			<MenuItem Key="10">Option 10</MenuItem>
			<SubMenu Key="sub3" Title="Submenu">
				<MenuItem Key="11">Option 11</MenuItem>
				<MenuItem Key="12">Option 12</MenuItem>
			</SubMenu>
		</SubMenu>
	</Menu>
</div>

@code {
	bool collapsed = false;

	RenderFragment sub1Title =
	@<span>
		<Icon Type="mail" Theme="outline"></Icon>
		<span>Navigation One</span>
	</span>;

	RenderFragment sub2Title =
	@<span>
		<Icon Type="appstore" Theme="outline"></Icon>
		<span>Navigation Two</span>
	</span>;

	void ToggleCollapsed()
	{
		collapsed = !collapsed;
	}

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (firstRender)
		{
			await iconService.CreateFromIconfontCN("//at.alicdn.com/t/font_2735473_hi62ezq5579.js");
		}
	}
}
